<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>照片上传</title>
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<style>
			.msg {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<fieldset>
				<legend>文件上传</legend>
				<div class="form-group">
					<input type="file" id="myfile" @change="clear()"/>
					<button @click="upload()" :disabled="disFlg">上传</button>
				</div>
				<div class="form-group">
					<button onclick="location.replace('studentselect.html');">返回</button>
					<span class="msg" v-if="error.flg">{{error.msg}}</span>
				</div>
			</fieldset>
			<fieldset>
				<legend>照片查看</legend>
				<div class="form-group">
					<div v-if="param.stiimg != null && param.stiimg != ''">
						<img :src="'http://localhost:8080/stzhxyssm/web/upload/' + param.stiimg" style="width:144px;height: 144px;"/>
					</div>
					<div v-else>
						<div style="width:144px;height: 144px;"></div>
					</div>
				</div>
			</fieldset>
		</div>
		
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/urlparse.js" ></script>
		<script type="text/javascript" src="js/vue-2.0.js" ></script>
		<script type="text/javascript" src="js/tokenAjax.js" ></script>
		<script>
			var vue = new Vue({
				el : "#app",
				data : {
					param : {
						stuId : "",
						stiimg : ""
					},
					error : {
						flg : false,
						msg : ""
					},
					disFlg : false
				},
				methods : {
					upload : function() {
						var fileName = $("#myfile").val();
						if(fileName == null || fileName == '') {
							this.error.flg = true;
							this.error.msg = "请选择文件后，再上传!";
							return;
						}
						var suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
						if(suffix.toLocaleLowerCase() != "jpg" && suffix.toLocaleLowerCase() != "png" && suffix.toLocaleLowerCase() != "jpeg" && suffix.toLocaleLowerCase() != "bmp" ) {
							this.error.flg = true;
							this.error.msg = "请上传jpg,png,jpeg或者bmp的文件上传!";
							return;
						}
						
						var file = $("#myfile")[0].files[0];
						if(file.size >= 1024*1024*2) {
							this.error.flg = true;
							this.error.msg = "请上传2M以内的文件!";
							return;
						}
						
						var self = this;
						var formdata = new FormData();
						formdata.append("file", file);
						formdata.append("stuId", this.param.stuId);
						
						$.ajax({
							type:"post",
							url:"http://localhost:8080/stzhxyssm/student/upload",
							data:formdata,
							processData: false,
        					contentType: false,
        					headers: {'Authorization': localStorage.getItem("token")},
        					success : function(data) {
        						if(data != -1) {
        							// 上传成功
        							self.error.flg = true;
									self.error.msg = "上传成功,稍后自动跳转到查询页面!";
									self.disFlg = true;
									self.param.stiimg = data;
									
				   		       	  	setTimeout("location.replace('studentselect.html')", 2000);
        						} else {
        							self.error.flg = true;
									self.error.msg = "您上传的文件未成功保存到服务器，请联系管理员!";
									return;
        						}
        					}
						});
					},
					clear : function() {
						this.error.flg = false;
					    this.error.msg = "";
					}
				},
				created : function() {
					var id = getQueryString("id");
					var self = this;
					tokenAjax("http://localhost:8080/stzhxyssm/student/selectbyid", {"id": id}, function(data) {
							self.param.stuId = data.stuId;	
							self.param.stiimg = data.stiimg;
					});
				}
			});
			
		</script>
	</body>
</html>
